
<template>
  <div class="container" v-if="data.data!==undefined">
    <el-row :gutter="20" >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题型】：<span>{{ data.data.questionType | questionType }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【编号】：<span>{{ data.data.id }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【难度】：<span>{{ data.data.difficulty | difficulty }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【标签】：<span>{{ data.data.directoryName }}</span>
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】：<span>{{ data.data.subjectName }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【目录】：<span>{{ data.data.directoryName }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】：<span>{{ data.data.direction }}</span>
        </div></el-col
      >
    </el-row>
    <hr />
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【题干】：
          <p v-html="data.data.question"></p>
            <div v-if="data.data.questionType==='1'">
              <p>单选题选项 ： 以下选项位正确答案</p>
            </div>
            <div v-else-if="data.data.questionType==='2'">
               <p>多选题选项 ： 以下选项位正确答案</p>
            </div>
            <div v-else>
              <p></p>
            </div>
        </div></el-col
      >
    </el-row>
    <hr />
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【参考答案】：
          <el-button type="danger" @click="showVideo">视频答案预览</el-button>
          <div>
            <video
              v-if="videoShow"
              :src="data.data.videoURL"
              class="video"
              autoplay
            ></video>
          </div>
        </div>
      </el-col>
    </el-row>
    <hr />
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【答案解析】：<span v-html="data.data.answer"></span></div
      ></el-col>
    </el-row>
    <hr />
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【题目备注】：<span>{{ data.data.tags }}</span>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: '',
      videoShow: false
    }
  },
  methods: {
    showVideo () {
      this.videoShow = !this.videoShow
    }
  },
  filters: {
    questionType (val) {
      if (val === '1') {
        console.log(val)
        return '单选'
      } else if (val === '2') {
        console.log(val)
        return '多选'
      } else {
        console.log(val)
        return '简答'
      }
    },
    difficulty (val) {
      if (val.difficulty === '1') {
        return '简单'
      } else if (val.difficulty === '2') {
        return '一般'
      } else {
        return '困难'
      }
    }
  },
  props: {
    data: {
      type: Object
    }
  },
  created () {
    // this.getDetail()
    // console.log(this.Ids)
  }
}
</script>

<style scoped lang='less'>
.el-row {
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 30px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.video {
  width: 400px;
  height: 300px;
}
</style>
